<template>
    <div id="app">
        <m-header />
        <div class="container">
            <router-view class="router-view"></router-view>
        </div>
        <m-footer />
    </div>
</template>

<script>
import { mapState } from "vuex";
import store from "./store";
import router from "./router";
export default {
    name: "app",
    components: {},
    data() {
        return {
            transitionName: ""
        };
    },
    mounted() {
        if (localStorage.getItem("token")) {
            store.dispatch("ctrl_tabbar", {
                visible: true,
                login: true
            });
            this.getUserInfo();
        }
    },
    computed: {
        ...mapState({
            isLoading: state => state.global.loading,
            toastData: state => state.global.toastData,
            customerVisible: state => state.global.toastData
        })
    },

    watch: {
        $route(to, from) {
            const routeDeep = router.options.routes.map(item => item.path);
            const toDepth = routeDeep.indexOf(to.path);
            const fromDepth = routeDeep.indexOf(from.path);
            this.transitionName = toDepth > fromDepth ? "in" : "out";
        }
    }
};
</script>

<style lang="less">
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background-color: #000;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow: hidden;
    position: relative;
}
.container {
    min-height: calc(100vh - 60px);
}
</style>
